<template>
  <div ref="echartsRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, markRaw, onUnmounted } from 'vue';

const myEcharts = ref<any>();
const echartsRef = ref<any>();
const initEcharts = () => {
  myEcharts.value = markRaw(echarts.init(echartsRef.value));
  const options: any = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      type: 'scroll',
      icon: 'rect',
    },
    grid: {
      left: '10px',
      right: '10px',
      bottom: '0px',
      top: '30px',
      containLabel: true,
    },
    series: [
      {
        type: 'pie',
        radius: '80%',
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  };
  myEcharts.value.setOption(options);
};

const handleResize = () => {
  if (myEcharts.value) {
    myEcharts.value.resize();
  }
};

onMounted(() => {
  initEcharts();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
